import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
/* if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}
 */
// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

/* #什么是跨域
#1、跨域是浏览器对Ajax做出的同源策略
#2、同源指的是网页在浏览器打开时，地址栏里的地址中协议，域名，端口和内嵌的Ajax请求
#   的url地址中协议、域名、端口有一个对不上就跨域了 */

// 如何解决跨域？
// 方式1:jsonp
// jsonp和json没有关系 json是一种序列化数据的技术，jsonp是解决跨域问题的一种技术
// 使用script标签的src属性来发送请求而且它不受跨域限制，请求后让后台返回一个函数
// 调用字符串+数据，在前端进入到script标签之间当作js代码执行，把数据带回来
// 特点：需要前端传递一个方法名，后端返回函数调用格式的字符串
// 要求：前端和后端同时支持

// 方式2：cors
// 概念：跨域资源共享，现代浏览器前端默认支持，但是还需要后端开启才行
// 使用：cors是让后端进行设置
// 特点：你可以在响应头里看看有没有一个叫"Access-Control-Allow-Origin"字段（手机后台
// 设置的，作用：允许哪些源进行跨域访问）
// 要求：前端什么都不用做，正常使用axios发送ajax请求，只需要后端开始（前端无需感知）

// 方式3：代理服务器
// 针对：后端不开跨域支持，我们前端自己用代理服务器也能拿到数据
// 原理：前端代理服务器请求后端接口服务器，因为服务器之间没有跨域限制
// 好在：vue脚手架有一个webpack开发服务器支持，给这个服务器进行配置，让他支持代理转发
// 1、axios请求不要直接请求外链地址（http开头）而是要请求/开头，代表当前所在服务器（http://localhost:9528）
// 2、配置代理转发 的规则，vue.config.js中devServer的proxy选项内配置（让开发服务器支持代理转发）
// 前提：后端真的有接口地址可以使用才能用Ajax请求（前后端分离的项目）
// 特殊：后端渲染的项目（SSR/nuxt.js技术->新学vue语法）数据在后端渲染完毕返回给前端网页
// 不用自己使用Ajax请求

// 后台返回的数据类型
// 类型1、失败的请求后台会返回400的http状态码（错误）
// http状态码来标记失败情况
// 类型2：无论成功/失败的请求，后台都会返回http状态200（ok）
// 但是在数据的字段上区别成功/失败

// 回调地狱
// 异步请求，Ajax/axios都有回调函数onload/then()里函数体，在回调函数里拿到结果
// 拿到结果以后，在这个函数体里，再次发起请求，又会有一个函数体嵌入在这里，继续嵌套请求回调函数。。。嵌套下去
// 形成了回调地狱

// vue组件样式相关
// 1、运行时选中标签，看右侧的style里样式被划线划掉了，优先级不够（权限）
// 2、/deep/选中组件内的选择器，如果看右侧的style样式类名已经上去了，证明已经选中了跟/deep/
// 没啥关系，如果发现类名写了，但是没上去，运行时选择器没有选到组件内类名（/deep/）
// /deep/作用：把scope加的属性选择器加到类名的前面，选中组件内无属性的类名
// 3、用错了，svg要用fill属性填充图标颜色，而不能用style影响颜色

// 封装好处：方便以后替换，复用性好，管理起来简单用起来方便
